import React, { Component, Fragment } from 'react';
import { Card, Button, Tabs, message  } from 'antd';
import { SmileTwoTone, HeartTwoTone, CheckCircleTwoTone } from '@ant-design/icons';

import './ui.less';

const { TabPane } = Tabs;

class ITabs extends Component {
	
	newTabIndex=0;//定义增加tab时的key
	
	handleCallback = (key) => {
		message.success(key)
	}
	UNSAFE_componentWillMount(){
		const panes = [
			{
				title: 'tab 1',
				content: 'tab 1jkklj;kllk',
				key: '1',
				closable: false
			},
			{
				title: 'tab 2',
				content: 'tab 12jkklfgj;kllk',
				key: '2'
			},
			{
				title: 'tab 3',
				content: 'tab 345545jkklj;kllk',
				key: '3'
			}
		]
		this.setState({
			activeKey: panes[0].key,
			panes
		})
	}
	onChange = (activeKey) => {
		this.setState({
			activeKey
		})
	}
	onEdit = (targetKey, action) => {
		this[action](targetKey)
	}
	add = () => {
	    const { panes } = this.state;
	    const activeKey = `newTab${this.newTabIndex++}`;
	    const newPanes = [...panes];
	    newPanes.push({ title: `newTab${this.newTabIndex++}`, content: 'Content of new Tab', key: activeKey });
	    this.setState({
	      	panes: newPanes,
	     	activeKey,
	    });
	};

	remove = targetKey => {
	    const { panes, activeKey } = this.state;
	    let newActiveKey = activeKey;
	    let lastIndex;
	    panes.forEach((pane, i) => {
	      	if (pane.key === targetKey) {
	       		lastIndex = i - 1;
	     	}
	    });
	    const newPanes = panes.filter(pane => pane.key !== targetKey);
	    if (newPanes.length && newActiveKey === targetKey) {
	        if (lastIndex >= 0) {
	            newActiveKey = newPanes[lastIndex].key;
	        } else {
	            newActiveKey = newPanes[0].key;
	        }
	    }
	    this.setState({
	        panes: newPanes,
	        activeKey: newActiveKey,
	    });
	};
	render(){
		return(
			<Fragment>
				<Card title="Tab标签页" className="card-wrap">
					<Tabs defaultActiveKey="2" onChange={this.handleCallback}>
						<TabPane tab="tab 1" key="1">这里是第一块的内容</TabPane>
						<TabPane tab="tab 2" key="2">这里是第二块的内容</TabPane>
						<TabPane tab="tab 3" key="3" disabled>这里是第三块的内容</TabPane>
					</Tabs>
				</Card>
				<Card title="tab带图标" className="card-wrap">
					<Tabs defaultActiveKey="2" onChange={this.handleCallback}>
						<TabPane 
							tab={<span><SmileTwoTone />tab1</span>} 
							key="1"
						>
							这里是第一块的内容<Button>按钮</Button>
						</TabPane>
						<TabPane 
							tab={<span><HeartTwoTone twoToneColor="#eb2f96" />tab2</span>} 
							key="2"
						>
							这里是第二块的内容
						</TabPane>
						<TabPane
							tab={<span><CheckCircleTwoTone twoToneColor="#52c41a" />tab3</span>} 
							key="3"
						>
							这里是第三块的内容
						</TabPane>
					</Tabs>
				</Card>
				<Card title="Tab标签页" className="card-wrap">
					<Tabs
						onChange={this.onChange}
						activeKey={this.state.activeKey}
						onEdit={this.onEdit}
						type="editable-card"
					>
						{
							this.state.panes.map((panel) => {
								return <TabPane 
									tab={panel.title} 
									key={panel.key}
								>
									{panel.content}
								</TabPane>
							})
						}
						
					</Tabs>
				</Card>
			</Fragment>
		)
	}
}

export default ITabs;